* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 背景渐变色-第一个值:中心颜色-第二个值:向外扩散颜色 */
  /* 设置初始背景颜色 */
  background: radial-gradient(#999, #293242);
}

.container {
  width: 300px;
  height: 400px;
  /* 使container容器成为定位的父元素 */
  position: relative;
}

/* 让父容器中的item元素绝对定位，且最大宽高为父容器大小 */

.container .item {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 初始化元素位置,否则过渡效果时会闪现一下 */
  top: 0;
  left: 0;
  /* 让元素变化时有过渡效果，平滑些 */
  transition: all 0.6s;
  /* 变化时，以下边中心为变化点（底边对齐） */
  /* transform-origin: center bottom; */
  /* 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身 */
  perspective: 300px;
}

.container .item img {
  width: 100%;
  height: 100%;
  /* width: 300px;
  height: 300px; */
  /*!设置不可选择，这样页面被快速反复点击时，不会出现选择的蓝底框 */
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  /* !设置图片不可拖拽 */
  -webkit-user-drag: none;
}

.container .pre {
  /* 让有left样式的元素，定位在左侧 */
  /* 300px是父元素宽度 */
  left: -300px;
  /* 模糊效果 */
  filter: blur(5px);
}

.container .next {
  /* 让有right样式的元素，定位在右侧 */
  left: 300px;
  /* 模糊效果 */
  filter: blur(5px);
}

.container .middle {
  /* 放大拥有middle样式的中间元素 */
  transform: scale(1.5)
}

.container .item .front-face {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.container .item .back-face {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* 文字板颜色 */
  background: linear-gradient(#999, #293242);
  /* 旋转时的方向和角度 */
  transform: translateX(-100px) rotateY(-90deg);
  transition: all 0.5s ease;
}

.middle:active .back-face {
  opacity: 1;
  transform: rotateY(0deg);
}

.middle:active .front-face {
  opacity: 0;
  transform: translateX(100px) rotateY(90deg);
}

.back-face span {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}

.container .overHide {
  /* 用于隐藏超过3个的dom元素，通过透明度和visibility来试应动画，逐渐消失 */
  visibility: hidden;
  opacity: 0;
}